<template>
    <div>
        <mian-layout @refresh="resetForm('search_data')">
            <template v-slot:conTop>
                <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                    <el-form-item label="订单编号" prop="orderNo">
                        <el-input v-model="search.orderNo" placeholder="输入订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="买方" prop="buyerPhone">
                        <el-input v-model="search.buyerPhone" placeholder="输入买方手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态" prop="orderStatus">
                        <el-select v-model="search.orderStatus" placeholder="选择状态">
                            <el-option  label="全部" value=""> </el-option>
                            <el-option  label="已付款" value="20"> </el-option>
                            <el-option  label="已发货" value="30"> </el-option>
                            <el-option  label="交易成功" value="50"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单类型" prop="mallOrderType">
                        <el-select v-model="search.mallOrderType" placeholder="选择状态">
                            <el-option  label="全部" value=""> </el-option>
                            <el-option  label="直购" value="0"> </el-option>
                            <el-option  label="拍卖" value="1"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="dataTime">
                        <el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
                    </el-form-item>
                </el-form>   
            </template>
            <!-- <div class="btnBox" style="padding-bottom:10px">
                <el-button type="success" icon="el-icon-plus" size="mini" @click="opegDg">创建分类</el-button>
            </div> -->
            <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page'>
                
                <el-table-column property="orderNo" label="订单编号" align='center'></el-table-column>
                <el-table-column property="goodsName" label="商品名称" align='left'></el-table-column>
                <el-table-column property="orderType" label="订单类型" align='center' width="80">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderType==0 ? '直购' :'拍卖'}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="settlePrice" label="商品成本价" align='center' width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.settlePrice.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="marketPrice" label="会员价/拍卖成交价" align='center' width="130">
                    <template slot-scope="scope">
                        <span>{{scope.row.marketPrice.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="quantity" label="购买数量" align='center' width="70"></el-table-column>
                <el-table-column property="buyerPhone" label="买方" align='center' width="100"></el-table-column>
                <el-table-column property="orderNo" label="实际付款金额" align='center' width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.payAmount.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="orderStatus" label="订单状态" align='center' width="70">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderStatus ? scope.row.orderStatus.message : '--'}}</span>
                        <!-- <span v-if="scope.row.orderStatus.code == 15">已付款</span>
                        <span v-if="scope.row.orderStatus.code == 20">待发货</span>
                        <span v-if="scope.row.orderStatus.code == 30">已发货</span>
                        <span v-if="scope.row.orderStatus.code == 50">交易成功</span> -->
                    </template>
                </el-table-column>

                <el-table-column property="timestamp" label="创建时间" align='center' width="140">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime}}</span>
                    </template>
                </el-table-column>
                
                
                <el-table-column prop="operation" align='center' label="操作" width="100">
                    <template slot-scope='scope'>
                        <el-button size="mini" icon="el-icon-search" @click="goDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>

            </my-table>
        </mian-layout>
    </div>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myDialog from '@/components/public/myDialog';
import {
  get_order_list,
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myDialog
    },
    data(){
        return{
            search:{
                buyerPhone: "", //买家手机号
                createTimeEnd: "", // 	创建时间-区间结束
                createTimeStart: "", //创建时间-区间开始
                goodsName: "", //商品名称
                mallOrderType: '', //订单类型 0直购 1 拍卖
                orderNo: "",
                orderStatus: '',	// 订单状态,20:出库中 ,30:已发货, 50:交易成功	
            },
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            dataTime:''
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.getList()
    },
    methods:{
        doSearch(){
            this.page.pageIndex = 1
            this.getList()
        },
        getList(callback){ 
            this.loading = true
            if(this.dataTime){
                this.search.createTimeEnd = this.dataTime[0]
                this.search.createTimeStart = this.dataTime[1]
            }
            get_order_list({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                orderField: "",
                orderType: "",
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.count
                //callback && callback()
            })
        },
        
        tableSelect(item){
            this.multipleSelectionIds = []
            for(let i=0;i<item.length;i++){
                this.multipleSelectionIds.push(item[i]._id)
            }
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dataTime = []
            for (const key in this.search) {
               this.search[key] = '' 
            }
            this.page.pageIndex = 1
            this.getList()
        },
        goDetail(item){
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push(`/goods/order/${item.orderId}`)
        }
    }
}
</script>